<template>
  <!-- 仓库列表 -->
  <div class="Right">
    <RepoSearch @getKeyword="getKeyword" />
    <RepoList :repoList="repoList" />
  </div>
</template>

<script>
import RepoSearch from "./repoSearch.vue";
import RepoList from "./repoList.vue";
import { getRepoList, getRepoListBykeyword } from "../api/repo";

import { onMounted, ref, watch, toRefs } from "vue";
export default {
  components: {
    RepoList,
    RepoSearch,
  },

  props: {
    userId: String,
  },

  setup(props) {
    const { userId } = toRefs(props);
    let repoList = ref([]); 
    const getRepoListByUserId = () => {
      repoList.value = getRepoList(userId.value);
    };

    const getKeyword = (keyword) => {
      repoList.value = getRepoListBykeyword(keyword);
    };

    onMounted(getRepoListByUserId);
    watch(userId, getRepoListByUserId);

    return { 
      getKeyword,
      repoList,
      getRepoListByUserId,
    };
  },
};
</script> 